<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <ul>
    <li><span>我是list1,我是list1,我是list1,我是list1,我是list1</span> <button>bt1</button></li>
    <li><span>我是list2</span> <button>bt2</button></li>
  </ul>
</head>
<body>
  <script>
    var event = new Event('close');
    function createPop(options){
      var pop = document.createElement('div')
      var width = options.width || 400;
      var height = options.height || 300;
      pop.style.position = 'fixed'
      pop.style.width = width + 'px'
      pop.style.height = height + 'px';
      pop.style.border = '1px solid #666';
      pop.style.left = "50%"
      pop.style.marginLeft = -width/2 + 'px'
      pop.style.top = "50%"
      pop.style.marginTop = -height/2 + 'px'
      var body = document.getElementsByTagName('body')[0]
      body.appendChild(pop)

      var close = document.createElement('div')
      close.innerHTML = 'X'
      close.style.position = 'absolute'
      close.style.width = '30px'
      close.style.height = '30px'
      close.style.right = '20px'
      close.style.top = '10px'
      close.style.border = "1px solid #444"
      close.style.textAlign = "center"
      close.style.lineHeight = "30px"
      pop.appendChild(close)
      close.onclick = function(){
        pop.remove()
      }

      var msgcontent = options.msg || 'welcome to use pop'
      var msg = document.createElement('div')
      msg.style.position = "absolute"
      msg.style.fontSize = "20px"
      msg.style.top = "50px"
      msg.style.margin = '0 30px 30px 30px'
      msg.innerHTML = msgcontent
      pop.appendChild(msg)


      body.addEventListener('close',function(){
        pop.remove()
      })

      if (options.commit){
        var commit = document.createElement('button')
        commit.style.height = "30px"
        commit.innerHTML = "commit"
        commit.style.fontSize = "20px"
        commit.style.position = 'absolute'
        commit.style.right = '30px'
        commit.style.bottom = "50px"
        commit.onclick = options.commit

        pop.appendChild(commit)
      }
    }

    var ul = document.querySelectorAll('ul')[0]
    var body = document.getElementsByTagName('body')[0]
    ul.onclick = function(evt){
      if(evt.target.tagName = 'BUTTON'){
        var node = evt.target.parentNode.firstChild
        createPop({
          msg: node.innerHTML,
          commit: function(){
            setTimeout(function(){
              console.log(this.innerHTML)
              body.dispatchEvent(event)
            }.bind(this), 2000)
          }.bind(node)
        })
      }
    }
  </script>
</body>
</html>
